{% extends "shop/base.html" %}

{% block title %}我的订单{% endblock %}

{% block content %}
    <div class="max-w-lg mx-auto bg-white rounded-lg overflow-hidden shadow-md">
        <div class="bg-gray-800 text-white uppercase font-bold py-2 px-4"><h1>我的订单</h1></div>
        <div class="py-4 px-6">

        </div>
        <div class="w-full">
            <table class="table-fixed border-collapse border border-emerald-500">
                <thead>
                <tr class="bg-emerald-300">
                    <th class="w-1/4 border border-emerald-500">订单号</th>
                    <th class="w-1/4 border border-emerald-500">详情</th>
                    <th class="w-1/4 border border-emerald-500">总价</th>
                    <th class="w-1/4 border border-emerald-500">信息</th>
                </tr>
                </thead>
                <tbody>
                {% for order in orders %}

                    <tr class="even:bg-blue-100">
                        <td class="border border-emerald-600 px-4 py-2">{{ order.id }}</td>
                        <td class="border border-emerald-600">
                            {% for order_item in order.items.all %}
                                <p>{{ order_item.cart.quantity }}x {{ order_item.cart.item.name }}({{ order_item.cart.item.price }})
                                    = ￥{{ order_item.cart.get_subtotal }}
                                </p>
                            {% endfor %}
                        </td>
                        <td class="border border-emerald-600">{{ order.get_total_price }}
                        </td>
                        <td class="border border-emerald-600"><a href="{% url 'order_detail' order.id %}" class="px-2 py-4 font-semibold text-white bg-violet-500 hover:bg-violet-600 active:bg-violet-700 focus:outline-none focus:ring focus:ring-violet-300">订单详情</a></td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
    </div>


<div class="flex w-1/2 p-6 mt-6 bg-gray-100">
  <div class="flex-none w-48 relative">
    <img src="/item_images/book_NGjhhdO.JPG" alt="" class="absolute inset-0 w-full h-full object-cover" />
  </div>
  <form class="flex-auto p-6">
    <div class="flex flex-wrap">
      <h1 class="flex-auto text-xl font-semibold">
        Classic Utility Jacket
      </h1>
      <div class="text-xl font-semibold text-gray-500">
        $110.00
      </div>
      <div class="w-full flex-none text-sm font-medium text-gray-500 mt-2">
        In stock
      </div>
    </div>
    <div class="flex items-baseline mt-4 mb-6">
      <div class="space-x-2 flex">
        <label>
          <input class="w-9 h-9 flex items-center justify-center bg-gray-100 rounded-lg" name="size" type="radio" value="xs" checked>
          XS
        </label>
        <label>
          <input class="w-9 h-9 flex items-center justify-center" name="size" type="radio" value="s">
          S
        </label>
        <label>
          <input class="w-9 h-9 flex items-center justify-center" name="size" type="radio" value="m">
          M
        </label>
        <label>
          <input class="w-9 h-9 flex items-center justify-center" name="size" type="radio" value="l">
          L
        </label>
        <label>
          <input class="w-9 h-9 flex items-center justify-center" name="size" type="radio" value="xl">
          XL
        </label>
      </div>
      <div class="ml-auto text-sm text-gray-500 underline">Size Guide</div>
    </div>
    <div class="flex space-x-3 mb-4 text-sm font-medium">
      <div class="flex-auto flex space-x-3">
        <button class="w-1/2 flex items-center justify-center rounded-md bg-black text-white" type="submit">Buy now</button>
        <button class="w-1/2 flex items-center justify-center rounded-md border border-gray-300" type="button">Add to bag</button>
      </div>
      <button class="flex-none flex items-center justify-center w-9 h-9 rounded-md text-gray-400 border border-gray-300" type="button" aria-label="like">
        <svg width="20" height="20" fill="currentColor">
          <path fill-rule="evenodd" clip-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" />
        </svg>
      </button>
    </div>
    <p class="text-sm text-gray-500">
      Free shipping on all continental US orders.
    </p>
  </form>
</div>

<div class="flex p-6 w-2/3">
  <div class="flex-none w-44 relative">
    <img src="/kids-jumpsuit.jpg" alt="" class="absolute inset-0 w-full h-full object-cover rounded-lg" />
  </div>
  <form class="flex-auto pl-6">
    <div class="flex flex-wrap items-baseline">
      <h1 class="w-full flex-none font-semibold mb-2.5">
        Kids Jumpsuit
      </h1>
      <div class="text-4xl leading-7 font-bold text-purple-600">
        $39.00
      </div>
      <div class="text-sm font-medium text-gray-400 ml-3">
        In stock
      </div>
    </div>
    <div class="flex items-baseline my-8">
      <div class="space-x-2 flex text-sm font-medium">
        <label>
          <input class="w-9 h-9 flex items-center justify-center rounded-full bg-purple-700 text-white" name="size" type="radio" value="xs" checked>
          XS
        </label>
        <label>
          <input class="w-9 h-9 flex items-center justify-center rounded-full border-2 border-gray-200" name="size" type="radio" value="s">
          S
        </label>
        <label>
          <input class="w-9 h-9 flex items-center justify-center rounded-full border-2 border-gray-200" name="size" type="radio" value="m">
          M
        </label>
        <label>
          <input class="w-9 h-9 flex items-center justify-center rounded-full border-2 border-gray-200" name="size" type="radio" value="l">
          L
        </label>
        <label>
          <input class="w-9 h-9 flex items-center justify-center rounded-full border-2 border-gray-200" name="size" type="radio" value="xl">
          XL
        </label>
      </div>
      <div class="ml-3 text-sm text-gray-500 underline">Size Guide</div>
    </div>
    <div class="flex space-x-3 mb-4 text-sm font-semibold">
      <div class="flex-auto flex space-x-3">
        <button class="w-1/2 flex items-center justify-center rounded-full bg-purple-700 text-white" type="submit">Buy now</button>
        <button class="w-1/2 flex items-center justify-center rounded-full bg-purple-50 text-purple-700" type="button">Add to bag</button>
      </div>
      <button class="flex-none flex items-center justify-center w-9 h-9 rounded-full bg-purple-50 text-purple-700" type="button" aria-label="like">
        <svg width="20" height="20" fill="currentColor">
          <path fill-rule="evenodd" clip-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" />
        </svg>
      </button>
    </div>
    <p class="text-sm text-gray-500">
      Free shipping on all continental US orders.
    </p>
  </form>
</div>

{% endblock %}